<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><%=@page_title || @test.name%></title>
<link href="/stylesheets/survey_public.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/javascripts/jquery/jquery-1.3.2.js"></script>
<script type="text/javascript" src="/javascripts/jquery/jquery.validate.min.js"></script>
<script type="text/javascript" src="/javascripts/jquery/jquery-metadata.js"></script>
<style type="text/css">
#content{
  width:885px; float:left;
  margin:30px 0 0 50px;
  height:auto !important;
  height:450px;
  min-height:450px;
}
div#form-message{
	margin: 5px;
	padding: 5px;
        width:200px;
}

#footer{ width:100%; height:200px; float:left; background:url(/images/user/report_list/footer.jpg) no-repeat;
             text-align:center; color:#295c72;}
#footer h1{ margin-top:100px;}
#userinfo{margin-left : 20px;margin-right : 10px ;margin-top :10px;}
#user-guide{margin:10px 0 15px 10px;}
div#part{margin: 15px 0 15px 15px;}
</style>
<script type="text/javascript">
  $(function(){

    //init...
    $('.question-page').hide();
    $('#speed').hide();
    $('#user-guide').hide();
    $('#survey_id').attr('value', <%=@test.id%>);

    $('#user-guide').show();
    $('#page-0').show();
    settime();
    DoCallTimer();
    $('#speed').show();


    //绑定表单验证
    var container = $('div#form-messages');
    var validator = $("#test-form").validate({
      errorClass: "warning",
      onkeyup: false,
      onblur: false,
      errorContainer: container,
      errorLabelContainer: $("ol", container),
      wrapper: 'li',
      meta: "validate"
    });

  });

  function next(current_page_id){
    var no_checked_questions = check_no_checked_questions(current_page_id);
    if(no_checked_questions.length == 0){
      $('.question-page').hide();
      $('#page-' + (current_page_id+1) ).show();
    }else{
      var msg = "您还有没有选择以下项目：";
      for(i=0; i<no_checked_questions.length; i++){
        msg += "第" + no_checked_questions[i] +　"题 ";
      }
      var page_size = <%=@test.page_size || "null"%>;
      if(page_size != "null" && page_size == 1) {
        msg = "您还没有选择";
      }
      alert(msg);
    }
  }
  
  function check_no_checked_questions(current_page_id){
    var no_checked_questions = new Array();
    var qs = $('.page-' + current_page_id + '-q-value');
    for(i=0; i<qs.length; i++) {
      if(qs[i].value == 'nil'){
        //s = qs[i].id;
        //s = s.substring(s.indexOf('-') + 1, s.indexOf('-value'))
        no_checked_questions.push(i+1);
      }
    }
    return no_checked_questions;
  }

function finished(){
document.getElementById('test-form').submit();
}

  function finish(current_page_id){
    var no_checked_questions = check_no_checked_questions(current_page_id);
    if(no_checked_questions.length == 0){
      document.getElementById('test-form').submit();
    }else{
      var msg = "您还有没有选择：";
      for(i=0; i<no_checked_questions.length; i++){
        msg += "第" + no_checked_questions[i] +　"题 ";
      }
      var page_size = <%=@test.page_size || "null"%>;
      if(page_size != "null" && page_size == 1) {
        msg = "您还没有选择";
      }
      alert(msg);
    }
  }

  function check_choice(q_id, value, c_id, part_id, idx){
    //设置题目分值
    $("#question-" + q_id + "-value").attr("value", value);
    $("#question-" + q_id + "-choice").attr("value", 65+idx);
    $("#question_" + q_id).attr("value", q_id);
    $("#question-" + q_id + "-part").attr("value", part_id);

    //替换选择按钮的图片
    $(".choices-img-" + q_id).attr("src", "/images/user/test/chooseblue.gif");
    $("#img-" + c_id).attr("src", "/images/user/test/chooseblue2.gif");
  }

  var CallTimeLen = "0";
  var timer1 = null;

  function stop(){
   clearTimeout(window.timer1);
  }
  function settime(){
    var now= new Date();
    var month=now.getMonth()+1;
    var day=now.getDate();
    var hour=now.getHours();
    var minute=now.getMinutes();
    var second=now.getSeconds();
    document.getElementById("start_time").innerHTML = month+"月"+day+"日 "+hour+":"+minute+":"+second
  }

  function DoCallTimer(){
    var minute="0";
    var second="0";
    CallTimeLen = parseInt(CallTimeLen)+1;
    hour=parseInt(CallTimeLen/3600)
    minute = parseInt((CallTimeLen-(hour*3600))/60);
    second = CallTimeLen%60;
    if(minute=="0" &&hour=="0")
    {
     document.getElementById("timer").innerHTML =second+"秒";
    }
    else if (hour=='0')
    {
     document.getElementById("timer").innerHTML=minute+"分"+second+"秒";
    }else
    {
    document.getElementById("timer").innerHTML =hour+"小时"+minute+"分"+second+"秒";
    }
    timer1 = window.setTimeout("DoCallTimer()",1000);
  }

  function isDigit(s) {
    var patrn=/^[0-9]{1,20}$/;
    if (!patrn.exec(s)) return false
    return true
  }
</script>
</head>

<body>
  <div id="page">

    <div id="header">
      <ol>
        <li id="title-text"><%= @test.name%> </li>
      </ol>
      <ul>
        <li> <%=current_user.name%></li>
        <li><a href="/login/logout">安全退出</a></li>
      </ul>
    </div>

<% form_for(:test, :url => { :action => "show_report" }, :html => {:name=>'test-form', :id=>'test-form'}) do %>
  <%= hidden_field_tag "id", @test.id %>
    <div id="content">
      <div id="speed" style="display:none">
          测试开始时间:<font color="red" id="start_time"></font>&nbsp;&nbsp;&nbsp;
          测试已用时:&nbsp;<font color="red" id="timer"></font>
      </div>

      <div id="user-guide" style="display:none">
      <font color="red"><b>为方便预测试，节省时间每个题目都已经有预选答案，可以直接提交也可以做出选择再提交！</b></font>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="button"  onclick="finished();" value="直接提交"/><br /><br/>
        <b>指导语：</b>
        <p>
          <%=@test.user_guide%>
        </p>
        
      </div>
        <% @pages.each_with_index do |page, index| %>
      <div id="page-<%=index%>" class="question-page" style="display:none">

          <% question_num = 0 %>
          <% page.each_with_index do |item, i|  %>

            <% if item[:type] == "question" %>
              <% question_num += 1 %>

              <% q = item[:item] %>
              <% if i%2==0 %>
        <input type="hidden" id="question-<%=q.id%>-value" name="question-<%=q.id%>-value" class="page-<%=index%>-q-value" value="<%=q.choices[0].value%>" />
        <input type="hidden" id="question-<%=q.id%>-choice" name="question-<%=q.id%>-choice" value="65"/>
             <% else %>
          <input type="hidden" id="question-<%=q.id%>-value" name="question-<%=q.id%>-value" class="page-<%=index%>-q-value" value="<%=q.choices[1].value%>" />
          <input type="hidden" id="question-<%=q.id%>-choice" name="question-<%=q.id%>-choice" value="66"/>
             <% end %>
        <input type="hidden" id="question_<%=q.id%>" name="question_id[]" value="<%=q.id%>"/>
        <input type="hidden" id="question-<%=q.id%>-part" name="question-<%=q.id%>-part" value="<%=q.part_id%>"/>
        <div id="question-<%=q.id%>" class="question">
          <table width="90%" border="0" cellpadding="13" cellspacing="0">
            <tbody>
              <tr>
                <td class="cs_title_1211" align="left">
                  <a name="position_6287"><%= question_num %> .<%= q.description %></a>
                </td>
              </tr>
              <tr>
                <td align="center">

                  <table width="96%" border="0" cellpadding="13" cellspacing="0">
                    <tbody>
                      <tr><td height="10px"></td></tr>
                      
                        <% q.choices.each_with_index do |c, idx| %>
                          <% letter = (65 + idx).chr %>
                      <tr style="cursor: pointer;height:32px;" onmousemove="this.bgColor='#F4F4F4'" onmouseout="this.bgColor=''" bgcolor="">
                        
                        <td class="" onclick="check_choice(<%=q.id%>,<%=c.value%>, <%=c.id%>, <%= q.part_id%>, <%=idx%>);" width="50">
                          <!--
                          <input id="answervalue_<%=c.id%>" name="itemanswers_<%= q.id%>" value="<%=c.value%>" type="hidden" />
                          -->
                          <img src="/images/user/test/chooseblue.gif" id="img-<%=c.id %>" class="choices-img-<%=q.id%>" alt="" />
                        </td>
                        <td width="18px" onclick="check_choice(<%=q.id%>,<%=c.value%>, <%=c.id%>, <%= q.part_id%>, <%=idx%>);"><%= letter %>.</td>
                        <td class="" align="left" onclick="check_choice(<%=q.id%>,<%=c.value%>, <%=c.id%>, <%= q.part_id%>, <%=idx%>);">
                          <%= c.content %>
                        </td>
                      </tr>
                        <% end %>

                      <tr><td height="10px"></td></tr>
                    </tbody>
                  </table>
                  
                </td>
              </tr>
            </tbody>
          </table>
        </div>

            <% else %>
        <div id="part">
              <% part = item[:item] %>
              <b><%= part.name %></b>
        </div>
            <% end %>
        
          <% end %>
        
          <% if index == @pages.length - 1 %>
        <a id="finish" onclick="finish(<%=index%>);" href="#">
          <img src="/images/user/prof_survey/finish.jpg" width="86" height="23" alt="完成" />
        </a>
          <% else %>
        <a id="next" onclick="next(<%=index%>);" href="javascript:;">
          <img src="/images/user/prof_survey/next.jpg" width="88" height="23" alt="下一步" />
        </a>
          <% end %>
      </div>
      <% end %>
    </div>

<% end %><!--form结束-->
  </div>

  <div id="footer">
    <h1>北京心嘉源咨询有限公司 CopyRight © www.iyaoi.cn 2009</h1>
  </div>

</body>
</html>
